/**
 * Settings Panel
 * 
 * Comprehensive settings interface with tabs
 */

import { lazy, Suspense } from 'react';
import { Settings, Palette, Layout, Keyboard, Wrench } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { LayoutPresets } from './LayoutPresets';
import { KeyboardShortcuts } from './KeyboardShortcuts';
import { ThemeSettingsCard } from './ThemeToggle';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { LoadingSpinner } from '@/components/ui/loading-spinner';

// 懒加载 MCP 设置（较大且不常用）
const MCPSettings = lazy(() => import('./MCPSettings').then(module => ({ default: module.MCPSettings })));

interface SettingsPanelProps {
  defaultTab?: string;
}

export function SettingsPanel({ defaultTab = 'appearance' }: SettingsPanelProps) {
  return (
    <div className="container max-w-6xl mx-auto p-6 space-y-6">
      <div className="flex items-center gap-3">
        <Settings className="w-8 h-8" />
        <div>
          <h1 className="text-3xl font-bold">设置</h1>
          <p className="text-muted-foreground mt-1">
            自定义您的 CAgent 体验
          </p>
        </div>
      </div>

      <Tabs defaultValue={defaultTab} className="w-full">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="appearance" className="flex items-center gap-2">
            <Palette className="w-4 h-4" />
            <span className="hidden sm:inline">外观</span>
          </TabsTrigger>
          <TabsTrigger value="layout" className="flex items-center gap-2">
            <Layout className="w-4 h-4" />
            <span className="hidden sm:inline">布局</span>
          </TabsTrigger>
          <TabsTrigger value="keyboard" className="flex items-center gap-2">
            <Keyboard className="w-4 h-4" />
            <span className="hidden sm:inline">快捷键</span>
          </TabsTrigger>
          <TabsTrigger value="advanced" className="flex items-center gap-2">
            <Wrench className="w-4 h-4" />
            <span className="hidden sm:inline">高级</span>
          </TabsTrigger>
        </TabsList>

        {/* Appearance Settings */}
        <TabsContent value="appearance" className="space-y-4 mt-6">
          <Card>
            <CardHeader>
              <CardTitle>外观设置</CardTitle>
              <CardDescription>
                自定义应用的视觉外观
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <ThemeSettingsCard />

              <div className="space-y-2">
                <Label>字体大小</Label>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm">小</Button>
                  <Button variant="outline" size="sm" className="bg-accent">
                    中（当前）
                  </Button>
                  <Button variant="outline" size="sm">大</Button>
                </div>
                <p className="text-xs text-muted-foreground">
                  字体大小调整功能即将推出
                </p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Layout Settings */}
        <TabsContent value="layout" className="mt-6">
          <LayoutPresets />
        </TabsContent>

        {/* Keyboard Shortcuts */}
        <TabsContent value="keyboard" className="mt-6">
          <KeyboardShortcuts />
        </TabsContent>

        {/* Advanced Settings (MCP) */}
        <TabsContent value="advanced" className="mt-6">
          <Suspense fallback={<div className="p-8"><LoadingSpinner size="lg" /></div>}>
            <MCPSettings />
          </Suspense>
        </TabsContent>
      </Tabs>
    </div>
  );
}
